import React, { useEffect, useState } from 'react'
import { Input, Select, Button,Pagination } from 'antd';
import './index.less';
import { SearchOutlined, DownloadOutlined, ProfileOutlined } from '@ant-design/icons';
import Table from '../../../component/table/index'
import { pointData } from '../../../api/Student'
import Alert from '../../../component/alert'
import Navigation from '../../../component/Navigation'

function Point(props) {
  let [columns, setcolumns] = useState([])
  //获取到的总数据
  let [pointdata, setpointdata] = useState([])
  //获取到的截取的数据
  let [jiedata,setjiedata]=useState([])
  //总数据的条数
  let[num,setnum]=useState(0)
  //明细的弹框状态
  let [mflag, setmflag] = useState(false)
  //搜索名字
  let [searchname,setsearchname]=useState('')
  //上学的状态
  let [school,setchool]=useState('')
  //性别
  let [sex,setsex]=useState('')
  //弹框的名称
  let [alertname, setalertname] = useState('')
  //弹框的内容
  let [alertcon, setalertcon] = useState()
  //弹框的宽度
  let [width, setwidth] = useState('')
  //页码(并且默认是第一页)
  let [pageNumber,setpageNumber]=useState(1)
  //一页有多少条数据(默认一页有10条数据)
  let [pageSize,setpageSize]=useState(10)
  //左边的数据
  let [list,setlist]=useState([])
  //网站
  let [college,setcollege]=useState('网站工程')
  //阶段
  let [stage,setstage]=useState('实训')
  //班级
  let [classroom,setclassroom]=useState('2104A')
  let [totle,settotle]=useState([])
  const { Option } = Select;
  function close() {
    setmflag(false)
  }
    //点击分页(点击页码)
    function onChange(pageNumber) {
      console.log('Page: ', pageNumber);
      setpageNumber(pageNumber)
    }
    //分页的下拉
    function onShowSizeChange(current, pageSize) {
      console.log(current, pageSize);
      setpageSize(pageSize)
    }
    const handleClick = async (e: any) => {
      console.log(e.key);
      let a=e.key.split("-")
      console.log(a);
      setcollege(a[0])
      setstage(a[1])
      setclassroom(a[2])
      
    }
      //选择器
  function handleChange(value) {
    console.log(`selected ${value}`);
    setchool(value)
  }
  //选择器
  function sexChange(value) {
    console.log(`selected ${value}`);
    setsex(value)
  }
  //获取数据和分页
  useEffect(() => {
    pointData({college:college,stage:stage,classroom:classroom,pageNumber:pageNumber,pageSize:pageSize}).then((res) => {
      console.log(res);
      //总数据
      pointdata = res.data.result.res
      //总数据的条数
      num=res.data.result.ban.length
      setnum(num)
      //截取到的数据
      jiedata=res.data.result.jieArr
      // totle=res.data.result.ban
      settotle(res.data.result.ban)
      setjiedata(jiedata)
      setpointdata(pointdata)
      let columns = [
        {
          title: '学号',
          dataIndex: 'number',
          key: 'number',
        },
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '积分',
          dataIndex: 'totlepoint',
          key: 'totlepoint',
        },
        {
          title: '积分明细',
          render: (text, record) => (
            <a onClick={() => {
              console.log(record);
              setmflag(true)
              setalertname('积分详情')
              setalertcon(record)
              setwidth('700px')
            }}>明细</a>
          )
        },
        {
          title: '班级',
          dataIndex: 'class',
          key: 'class',
        },
        {
          title: '状态',
          dataIndex: 'stop',
          key: 'stop',
        },
        {
          title: '操作',
          render: (text, record) => (
            <ProfileOutlined style={{ fontSize: '20px', color: '#08c' }} onClick={() => {
              setalertname('调整')
              setmflag(true)
              setwidth('500px')
              setalertcon(record)
            }} />
          )
        },
      ]
      setcolumns(columns)
      const list = [
        {
          "id": 1,
          "collage": "网站工程",
          "school": [
            {
              "sid":"wsx",
              "name":"实训",
              "classlist":[
                  {"classname":"2104A"},
              ]
            },
            {
              "sid":"wzy",
              "name":"专业",
              "classlist":[
                  {"classname":"2109A"}
              ]
            },
            {
              "sid":"wzg",
              "name":"专高",
              "classlist":[
                  {"classname":"2106A"}
              ]
            }
          ]
        },
        {
          "id": 2,
          "collage": "传媒学院",
          "school": [
            {
              "sid": "czy",
              "name": "专业",
              "classlist": [
                {"classname":"2104A"},
                {"classname":"2109A"}
              ]
            }
          ]
        }
      ]
      setlist(list)
    })
  }, [college,stage,classroom,pageNumber,pageSize])
  return (
    <div>
      <div className="point">
        <div className="pointleft">
        <Navigation
            // 总数据
            data={list}
            // 一标题属性  数组类型  "collage":["网站工程", "人工智能"]
            primaryNavigationProps="collage"
            // 二级标题属性  "collage":["网站", "人工"]
            childrenProps='school'
            // 二级标题对象属性
            childrenItem='name'
            // 获取当前自己标题的key
            handleClick={handleClick}
            // 设置袭击标题的key值
            setChildrenKey="sid"
            isDeepMenu={true}
            deepProps="classlist"
            deepItem="classname"
            // 样式
            style={{ width: 200, height: 500, border: "1px solid #ccc" }}
            // defaultOpenKeys={['sub1']}
          />
        </div>
        <div className="pointright">
          <div className="pointrighttop">
            <Input placeholder="姓名" onChange={(e)=>{
              setsearchname(e.target.value)
            }} />
            <Select defaultValue="状态" style={{ width: 120 }}  onChange={handleChange}>
              <Option value="正常">正常</Option>
              <Option value="休学">休学</Option>
              <Option value="退学" >退学</Option>
              <Option value="毕业">毕业</Option>
              <Option value="开除">开除</Option>
            </Select>
            <Select defaultValue="性别" style={{ width: 120 }} onChange={sexChange}>
              <Option value="男">男</Option>
              <Option value="女">女</Option>
            </Select>
            <Button icon={<SearchOutlined />} type="primary" onClick={()=>{
              console.log(totle);
               //姓名
            let arr=[]
            totle.filter((item)=>{
              if(item.name.indexOf(searchname)!==-1&&item.stop==school&&item.sex==sex){
                arr.push(item)
              }
            })
            console.log(arr);
            setjiedata(arr)
          
            }}>搜索</Button>
            <Button type="primary" icon={<DownloadOutlined />} >导出</Button>
          </div>
          <div>违纪率</div>
          <div className="pointrightcon">
            <div>
              <Table studentData={jiedata} columns={columns}></Table>
            </div>
            <div className="page">
              <Pagination
                showQuickJumper
                defaultCurrent={1}
                total={num}
                showSizeChanger
                defaultPageSize={10}
                onShowSizeChange={onShowSizeChange}
                onChange={onChange} />
            </div>
          </div>
          <div>
            {
              mflag == true ? <Alert alertName={alertname} alertFlag={mflag} close={close} width={width} con={alertcon}></Alert> : null
            }
          </div>
        </div>
      </div>
    </div>
  )
}
export default Point;